<template>
  <!-- 需求管理 -->
  <div class="demand-container-padding">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
      <el-tab-pane
        v-for="item in tabList"
        :key="item.id"
        :label="item.label"
        :name="item.name"
      >
        <div class="form">
          <el-form :inline="true" :model="formInline" class="form-inline">
            <!-- <el-form-item label="博士后需求状态：" style="padding: 0">
              <el-select
                v-model="formInline.status"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="j in statusOptions"
                  :key="j.value"
                  :label="j.label"
                  :value="j.value"
                />
              </el-select>
            </el-form-item> -->
            <el-form-item label="单位名称：">
              <el-select
                v-model="formInline.unitId"
                placeholder="请输入"
                clearable
              >
                <el-option
                  v-for="j in dptList"
                  :key="j.id"
                  :label="j.name"
                  :value="j.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="填报日期：">
              <el-date-picker
                v-model="formInline.createTime"
                style="width: 240px"
                type="daterange"
                range-separator="→"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                clearable
              />
            </el-form-item>
            <el-form-item label="项目名称：">
              <el-input v-model="formInline.projectName" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handSearch">搜索</el-button>
              <el-button @click="handReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <el-divider />
        <div class="buttonList">
          <el-button type="primary" @click="handAddDemand">
            发起博士后需求
          </el-button>
          <el-button @click="exportDemand" :loading="downLoading">
            导出搜索结果
          </el-button>
        </div>
        <vxe-table
          :data="tableData"
          border="full"
          round
          align="center"
          stripe
          :loading="loadings"
          :row-config="{ useKey: true }"
        >
          <vxe-column
            v-for="k in columnList"
            :key="k.field"
            :field="k.field"
            :title="k.title"
            :width="k?.width"
            :formatter="k?.formatter"
            :column-config="{ useKey: true }"
          />
          <vxe-column
            field="operate"
            title="操作"
            fixed="right"
            width="200"
            :column-config="{ useKey: true }"
          >
            <template #default="{ row }">
              <el-button type="primary" link @click="viewEvent(row)">
                详情
              </el-button>
              <el-button type="danger" link @click="delEvent(row)">
                删除
              </el-button>
            </template>
          </vxe-column>
        </vxe-table>
        <vxe-pager
          v-model:current-page="pageVO.currentPage"
          v-model:page-size="pageVO.pageSize"
          :total="pageVO.total"
          :layouts="[
            'Total',
            'Sizes',
            'Home',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'End',
            'FullJump',
          ]"
          @page-change="pageChange"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import type { TabPaneName, TabsPaneContext } from 'element-plus'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { columnList, statusOptions } from './table/column'
  import { useRouter } from 'vue-router'
  import { useDownload } from '@/utils/useDownload'
  import {
    getDemandList,
    getDemandMyPageList,
    deletePatent,
    getDemandExport,
  } from '@/api/postdoctor'
  import { getSimpleDeptList } from '@/api/system/dept'

  const router = useRouter()
  const activeName = ref('my')
  const tabList = ref([
    {
      label: '我发起的博士后需求',
      name: 'my',
      id: '1',
    },
    {
      label: '所有博士后需求',
      name: 'all',
      id: '2',
    },
  ])

  const tableData = ref([])

  const dptList = ref([])
  const getDptList = () => {
    getSimpleDeptList().then((res: any) => {
      dptList.value = res.data
    })
  }

  // 切换tab
  const handleClick = (name: TabPaneName) => {
    // console.log(activeName.value, name, 'activeName.value')
    tableData.value = []
    getList()
  }
  // 搜索表单
  const formInline = ref({
    createTime: '',
    unitId: '',
    status: '',
    projectName: '',
  })
  // 搜索
  const handSearch = () => {
    console.log(formInline.value)
    getList()
  }
  // 重置搜索
  const handReset = () => {
    formInline.value = {
      createTime: '',
      unitId: '',
      status: '',
      projectName: '',
    }
    getList()
  }
  const loadings = ref(false)

  const viewEvent = (item) => {
    console.log('查看', item)
    router.push({ path: '/postdoctor/demand/details', query: { id: item.id } })
  }

  const delEvent = (item) => {
    ElMessageBox.confirm('确定删除该条博士后需求?', '删除博士后需求', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      deletePatent(item.id).then((res: any) => {
        if (res.code === 0) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
        }
        getList()
      })
    })
  }

  const pageVO = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10,
  })

  const pageChange = ({ pageSize, currentPage }) => {
    pageVO.currentPage = currentPage
    pageVO.pageSize = pageSize
    getList()
  }

  // 导出搜索结果
  const { downLoading, downloadFile } = useDownload(
    getDemandExport,
    '博士后需求管理.xls'
  )
  const exportDemand = async () => {
    await downloadFile({
      ...formInline.value,
      exportType: activeName.value == 'my' ? 1 : 2,
    })
  }

  const handAddDemand = () => {
    router.push({ path: '/postdoctor/demand/add' })
  }

  const getList = () => {
    const params = {
      pageNo: pageVO.currentPage,
      pageSize: pageVO.pageSize,
      ...formInline.value,
    }
    // console.log(activeName.value, 'activeName.value')

    if (activeName.value === 'my') {
      getDemandMyPageList(params).then((res) => {
        tableData.value = res.data.list
        pageVO.total = res.data.total
      })
    } else {
      getDemandList(params).then((res) => {
        tableData.value = res.data.list
        pageVO.total = res.data.total
      })
    }
  }

  onMounted(() => {
    getList()
    getDptList()
  })
</script>

<style lang="scss" scoped>
  // .demand-container-padding {
  //   padding: 12px 21px;
  //   width: 100%;
  //   height: 82vh;
  // }
  .buttonList {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .form-inline {
    .el-select {
      --el-select-width: 240px;
    }
    .el-input {
      --el-input-width: 240px;
    }

    :deep(.el-form-item__label) {
      padding: 0 8px 0 0;
    }

    :deep(.el-form-item) {
      margin-right: 24px;
    }
  }
  :deep(.el-button + .el-button) {
    margin-left: 10px;
  }
</style>
